<template>
  <view class="ver-layout">
    <block v-if="costList.length>0">
      <view v-for="(item,index) in costList" :key="index" class="cost-lesson-item hor-layout-center">
        <image class="item-icon" :src="item.course_image"></image>
        <view class="item-infos ver-layout">
          <view class="infos-major">{{ item.course_name }}</view>
          <view class="infos-teacher">教师：{{item.teacher_name}}</view>
          <view class="infos-time">{{item.time}}</view>
        </view>
        <view class="cost-state">{{ item.status }}</view>
      </view>
      <u-loadmore v-if="loadingObj.status" margin-top="15" :status="loadingObj.status"/>
    </block>
    <view v-else class="list-no-data">暂无数据</view>
  </view>
</template>

<script>
import {StudentInfoApi} from "@/api/recordStudy.js"

let engine = new StudentInfoApi()

export default {
  name: "costLesson",
  data() {
    return {
      studentObj: {},
      costList: [{}],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad(options) {
    this.studentObj = options
    // this.refreshData()
  },
  onReachBottom(e) {
    this.loadMore()
  },
  methods: {
    getCostLessonList() {
      let sid = this.studentObj.student_id, page = this.loadingObj.current
      engine.getCostLessonList({sid, page}).then(res => {
        this.costList = this.costList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.costList = []
      this.getCostLessonList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getCostLessonList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.costList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.cost-lesson-item {
  padding: 12px;
  margin: auto;
  margin-top: 12px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 6px;
}

.item-icon {
  width: 60px;
  height: 60px;
  background: #FF873C;
  border-radius: 5px;
}

.item-infos {
  flex: 1;
  margin-left: 13px;
}

.infos-major {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  line-height: 14px;
}

.infos-teacher {
  margin-top: 6px;
  margin-bottom: 9px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  line-height: 14px;
}

.infos-time {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  line-height: 12px;
}

.cost-state {
  width: 66px;
  height: 27px;
  background: #FF873C;
  border-radius: 13px;
  text-align: center;
  line-height: 27px;
  /* 文本样式 */
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}
</style>
